import { useState, useRef, useEffect } from "react"

import Demo41 from "./demo4_1"
import Demo42 from "./demo4_2"
function Demo4() {
    const [state, setState] = useState({
        name: "张三",
        num1: 0,
    })

    const timer = useRef(null)

    useEffect(() => {
        // 组件初始化时，设置定时器（不能在useEffect外使用定时器，因为useEffect会重复执行，造成内存泄漏。）
        timer.current = setInterval(() => {
            setState((prevState) => ({
                ...prevState,
                num1: prevState.num1 + 1,
            }))
        }, 2000)

        return () => {
            clearInterval(timer.current) // 组件卸载时清除定时器
        }
    }, [])

    // 通过回调函数，接受子组件传递的数据 (类似vue emit过来getName函数)
    const getSonName = (data) => {
        setState({
            ...state,
            name: data,
        })
    }

    return (
        <div className="main_box">
            <h1>本案例展示 组件通信的几种方式</h1>
            <div className="main_row">
                <Demo41 num={state.num1} name={state.name} />
                <Demo42 getName={getSonName} />
            </div>
            <div className="main_row">
                <div>子组件2传过来的数据: {state.name} </div>
                <div className="main_text">
                    <p>1.父传子：通过props </p>
                    <p>2.子传父：通过回调函数 </p>
                    <p>3.兄弟组件通信：通过父组件(1和2结合) </p>
                    <p>4.跨级组件通信：通过Context/redux (Context不常用，redux后面会讲) </p>
                </div>
            </div>
        </div>
    )
}

export default Demo4
